<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>
	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
	<!-- End_Exclude -->
    
   <style type="text/css">
	    #tree {
			vertical-align: top;
	    	width: 250px;
	    }
	    iframe {
	    	border: 1px dotted gray;
	    }
	</style>    
    <!-- Add code to initialize the tree when the document is loaded: -->
    <script type='text/javascript'>
    $(function(){
		// Attach the dynatree widget to an existing <div id="tree"> element
		// and pass the tree options as an argument to the dynatree() function:
		$("#tree").dynatree({
			onActivate: function(dtnode) {
				// Use our custom attribute to load the new target content:
				if( dtnode.data.url )
					$("[name=contentFrame]").attr("src", dtnode.data.url);
			},
			children: [
				{title: "Search engines", isFolder: true, expand: true,
					children: [
						{title: "Google", url: "http://www.google.com"},
						{title: "Yahoo", url: "http://yahoo.com"}
					]
				},
				{title: "jQuery", isFolder: true, expand: true,
					children: [
						{title: "jQuery", url: "http://www.jquery.com"},
						{title: "jQuery UI", url: "http://ui.jquery.com"},
						{title: "API browser", url: "http://api.jquery.com"},
						{title: "dynatree", url: "http://code.google.com/p/dynatree/"}
					]
				},
				{title: "Misc", isFolder: true, expand: true,
					children: [
						{title: "Welcome", url: "sample-iframe-1.html"}
					]
				}
			]
		});
	});
    </script>
</head>
<body class="example">
	<h1>Example: iframes</h1>
	<p class="description">
		This sample shows, how to use dynatree as a navigation menu.<br>
		A custom <code>url</code> attribute is added to the node data
		and set as <code>src</code> for the embedded &lt;iframe>.<br>
		<br>
		The [Toggle tree] button in the embedded welcome page also gives an example on
		how to access a tree that exists outside the own frame.
	</p>
	
	<table>
	<colgroup>
		<col width="300px" valign="top">
		<col width="90%">
	</colgroup>
	<tr>
		<td valign="top">
		    <!-- Add a <div> element where the tree should appear: -->
		    <div id="tree"> </div>
		</td>
		<td>
			<iframe src="sample-iframe-1.html" name="contentFrame" width="100%" height="500" 
			        scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
			  <p>Your browser does not support iframes</p>
			</iframe>
		</td>
	</tr>
	</table>	


	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" class="codeExample">View source code</a>
	</p>
	<!-- End_Exclude -->
</body>
</html>
